<template>
	<view class="container">
		<!-- 主要信息flex布局 -->
		<view class="main-flex">
			<!-- 基本信息 -->
			<view class="card basic-info">
				<view class="card-header">
					<view class="card-title">基本信息</view>
				</view>
				<view class="card-content">
					<!-- 公司名称单独一行 -->
					<view class="company-name-row">
						<text class="label">公司名称：</text>
						<text class="value">{{ companyData.company_name }}</text>
					</view>

					<!-- 两列布局的信息 -->
					<view class="info-two-col">
						<view class="info-col-item">
							<text class="label">经营年限：</text>
							<text class="value">{{ companyData.years_operation }}</text>
						</view>
						<view class="info-col-item">
							<text class="label">所在区域：</text>
							<text class="value">{{ companyData.registered_region }}</text>
						</view>
					</view>

					<view class="info-two-col">
						<view class="info-col-item">
							<text class="label">社保人数：</text>
							<text class="value">{{ companyData.social_insurance_count }}人</text>
						</view>
						<view class="info-col-item">
							<text class="label">纳税等级：</text>
							<text class="value">{{ companyData.tax_brackets_text }}</text>
						</view>
					</view>

					<view class="info-two-col">
						<view class="info-col-item">
							<text class="label">注册资本：</text>
							<text class="value green">{{ companyData.registered_capital }}万元</text>
						</view>
						<view class="info-col-item">
							<text class="label">实缴数额：</text>
							<text class="value green">{{ companyData.amount_paid }}万元</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 车牌信息 -->
			<view class="card vehicle-info">
				<view class="card-header">
					<view class="card-title">车牌情况</view>
				</view>
				<view class="card-content">
					<view class="info-row">
						<text class="label">燃油车牌</text>
						<text class="badge orange">{{ companyData.fuel_vehicle_license }}个</text>
					</view>
					<view class="info-row">
						<text class="label">电动车牌</text>
						<text class="badge green">{{ companyData.electric_vehicle_license }}个</text>
					</view>
					<view class="total-count">
						<text class="count">总计
							{{ companyData.fuel_vehicle_license + companyData.electric_vehicle_license }} 个车牌</text>
					</view>
				</view>
			</view>

			<!-- 资质认证 -->
			<view class="card qualification">
				<view class="card-header">
					<view class="card-title">资质认证</view>
				</view>
				<view class="card-content">
					<view class="badge-group">
						<text v-for="(qual, index) in displayQualifications" :key="index" class="badge blue">
							{{ qual }}
						</text>
					</view>
					<view class="special-scope">
						<text class="label">特许经营范围</text>
						<text class="value">{{ companyData.business_scope }}</text>
					</view>
				</view>
			</view>

			<!-- 知识产权 -->
			<view class="card intellectual">
				<view class="card-header">
					<view class="card-title">知识产权</view>
				</view>
				<view class="card-content">
					<view class="ip-flex">
						<view class="ip-item">
							<text class="ip-count indigo">{{ companyData.trademark }}</text>
							<text class="ip-label">商标</text>
						</view>
						<view class="ip-item">
							<text class="ip-count purple">{{ companyData.soft_works }}</text>
							<text class="ip-label">软著</text>
						</view>
						<view class="ip-item">
							<text class="ip-count green">{{ companyData.patent }}</text>
							<text class="ip-label">专利</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 财务状况 -->
			<view class="card financial">
				<view class="card-header">
					<view class="card-title">财务状况</view>
				</view>
				<view class="card-content">
					<view class="financial-flex">
						<view class="financial-item">
							<text class="label">近三年流水</text>
							<text class="value green">{{ companyData.net_cash_flow }}万元</text>
						</view>
						<view class="financial-item">
							<text class="label">近三年纳税</text>
							<text class="value blue">{{ companyData.total_tax_payment }}万元</text>
						</view>
						<view class="financial-item">
							<text class="label">总资产</text>
							<text class="value purple">{{ companyData.total_assets }}亿元</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 风险状况 -->
			<view class="card risk">
				<view class="card-header">
					<view class="card-title">风险状况</view>
				</view>
				<view class="card-content">
					<view class="info-row">
						<text class="label">企业异常</text>
						<text
							:class="['badge', companyData.enterprise_exception_text == '异常' ? 'red' : 'green-outline']">
							{{ companyData.enterprise_exception_text }}
						</text>
					</view>
					<view class="info-row">
						<text class="label">法律纠纷</text>
						<text :class="['badge', companyData.legal_disputes_text == '存在纠纷' ? 'red' : 'green-outline']">
							{{ companyData.legal_disputes_text }}
						</text>
					</view>
					<view class="risk-status">
						<view :class="getStatusIndicatorClass(companyData.enterprise_status_text)">
							<view :class="getStatusDotClass(companyData.enterprise_status_text)"></view>
							<text>{{ companyData.enterprise_status_text }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部固定操作栏 -->
			<view class="footer-fixed">
				<view class="footer-container">
					<view class="footer-btn-group">
						<view class="footer-btn contact-btn" @click="onDetail">
							<text>在线咨询</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as GoodsApi from '@/api/goods'
	import {
		getSceneData
	} from '@/core/app'

	export default {
		data() {
			return {
				companyData: {
					company_name: "",
					years_operation: "",
					registered_region: "",
					registered_capital: "",
					amount_paid: "",
					social_insurance_count: '',
					fuel_vehicle_license: '',
					electric_vehicle_license: '',
					qualification_status: '', // 接口返回的字符串（现在是文字格式）
					business_scope: "",
					trademark: '',
					soft_works: '',
					patent: '',
					tax_brackets_text: "",
					taxpayerType: "",
					net_cash_flow: "",
					total_tax_payment: "",
					total_assets: "",
					enterprise_exception_text: "",
					legal_disputes_text: "",
					enterprise_status_text: ''
				},
				goodsId: null,
				goods: {}
			}
		},
		computed: {
			displayQualifications() {
				// 如果qualification_status为空，返回空数组
				if (!this.companyData.qualification_status) {
					return []
				}

				// 直接按逗号分割文字值，不再需要数字映射
				return this.companyData.qualification_status.split(',')
					.map(item => item.trim()) // 去除前后空格
					.filter(item => item !== '') // 过滤掉空字符串
			}
		},
		async onLoad(options) {
			this.onRecordQuery(options)
		},
		methods: {
			// 获取状态指示器的样式类
			getStatusIndicatorClass(status) {
				const baseClass = ['status-indicator'];
				
				switch(status) {
					case '企业状况良好':
						baseClass.push('status-good');
						break;
					case '企业状况一般':
						baseClass.push('status-average');
						break;
					case '企业状态不佳':
						baseClass.push('status-bad');
						break;
					default:
						baseClass.push('status-good'); // 默认为良好状况
				}
				
				return baseClass;
			},
			
			// 获取状况点的样式类
			getStatusDotClass(status) {
				const baseClass = ['status-dot'];
				
				switch(status) {
					case '企业状况良好':
						baseClass.push('dot-good');
						break;
					case '企业状况一般':
						baseClass.push('dot-average');
						break;
					case '企业状态不佳':
						baseClass.push('dot-bad');
						break;
					default:
						baseClass.push('dot-good'); // 默认为良好状态
				}
				
				return baseClass;
			},
			
			onDetail() {
				uni.navigateTo({
					url: 'components/ReviewPopup?goodsId=' + this.goodsId,
				})
			},
			onRecordQuery(query) {
				const scene = getSceneData(query)
				this.goodsId = query.goodsId ? parseInt(query.goodsId) : parseInt(scene.gid)
			},
			getGoodsDetail() {
				const app = this
				GoodsApi.detail(app.goodsId)
					.then(result => {
						app.companyData = result.data.detail
						// resolve(result)
					})
				// .catch(reject)
			},
		},
		mounted() {
			this.getGoodsDetail()
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 15px;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	}

	.main-flex {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		max-width: 1200px;
		margin: 0 auto;
		margin-bottom: 100px;
	}

	.card {
		background-color: white;
		border-radius: 6px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		flex-grow: 1;
	}

	.basic-info {
		flex-basis: calc(50% - 8px);
		min-width: 300px;
	}

	.vehicle-info,
	.qualification,
	.intellectual,
	.risk {
		flex-basis: calc(25% - 8px);
		min-width: 200px;
	}

	.financial {
		flex-basis: calc(50% - 8px);
		min-width: 300px;
	}

	.card-header {
		padding: 8px 12px;
		border-bottom: 1px solid #edf2f7;
	}

	.card-title {
		font-size: 16px;
		font-weight: 600;
		color: #2d3748;
	}

	.card-content {
		padding: 10px;
	}

	.company-name-row {
		margin-bottom: 10px;
	}

	.company-name-row .label {
		font-size: 12px;
		color: #718096;
	}

	.company-name-row .value {
		font-weight: 600;
		color: #2d3748;
		font-size: 13px;
	}

	.info-two-col {
		display: flex;
		justify-content: space-between;
		margin-bottom: 4px;
	}

	.info-col-item {
		width: 48%;
		display: flex;
		/* align-items: center; */
	}

	.info-col-item .label {
		font-size: 12px;
		color: #718096;
		white-space: nowrap;
		margin-right: 4px;
		margin-bottom: 2px;
	}

	.info-col-item .value {
		font-weight: 600;
		color: #2d3748;
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.label {
		font-size: 12px;
		color: #718096;
		margin-bottom: 10px;
	}

	.value {
		font-weight: 600;
		color: #2d3748;
		font-size: 13px;
	}

	.green {
		color: #38a169;
	}

	.blue {
		color: #3182ce;
	}

	.purple {
		color: #805ad5;
	}

	.separator {
		height: 1px;
		background-color: #edf2f7;
		margin: 6px 0;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6px;
	}

	.badge {
		padding: 1px 6px;
		border-radius: 10px;
		font-size: 11px;
		font-weight: 500;
	}

	.badge.blue {
		background-color: #ebf8ff;
		color: #3182ce;
		border: 1px solid #bee3f8;
	}

	.badge.green {
		background-color: #f0fff4;
		color: #38a169;
		border: 1px solid #c6f6d5;
	}

	.badge.orange {
		background-color: #fffaf0;
		color: #dd6b20;
		border: 1px solid #feebc8;
	}

	.badge.red {
		background-color: #fff5f5;
		color: #e53e3e;
		border: 1px solid #fed7d7;
	}

	.badge.green-outline {
		background-color: #f0fff4;
		color: #38a169;
		border: 1px solid #c6f6d5;
	}

	.total-count {
		text-align: center;
	}

	.count {
		font-size: 14px;
		font-weight: bold;
		color: #2d3748;
	}

	.badge-group {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin-bottom: 8px;
	}

	.special-scope {
		display: flex;
		flex-direction: column;
	}

	.special-scope .value {
		font-size: 12px;
		color: #4a5568;
		line-height: 1.3;
		margin-bottom: 5px;
	}

	.ip-flex {
		display: flex;
		justify-content: space-between;
		gap: 4px;
		text-align: center;
	}

	.ip-item {
		flex: 1;
	}

	.ip-count {
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 2px;
		display: flex;
		flex-direction: column;
	}

	.ip-label {
		font-size: 11px;
		color: #718096;
	}

	.financial-flex {
		display: flex;
		justify-content: space-between;
		gap: 4px;
	}

	.financial-item {
		flex: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
	}

	.financial-item .value {
		font-weight: 700;
	}

	.risk-status {
		text-align: center;
		padding-top: 4px;
	}

	.status-indicator {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 2px 8px;
		border-radius: 12px;
		font-size: 12px;
	}
	
	/* 良好状态 - 绿色 */
	.status-indicator.status-good {
		background-color: #f0fff4;
		color: #38a169;
	}
	
	/* 一般状态 - 橙色 */
	.status-indicator.status-average {
		background-color: #fffaf0;
		color: #dd6b20;
	}
	
	/* 不佳状态 - 红色 */
	.status-indicator.status-bad {
		background-color: #fff5f5;
		color: #e53e3e;
	}

	.status-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}
	
	/* 良好状态点 - 绿色 */
	.status-dot.dot-good {
		background-color: #38a169;
	}
	
	/* 一般状态点 - 橙色 */
	.status-dot.dot-average {
		background-color: #dd6b20;
	}
	
	/* 不佳状态点 - 红色 */
	.status-dot.dot-bad {
		background-color: #e53e3e;
	}

	.footer-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 999;
	}

	.footer-container {
		padding: 20rpx 30rpx;
	}

	.footer-btn-group {
		display: flex;
		justify-content: space-between;
	}

	.footer-btn {
		flex: 1;
		padding: 20rpx 0;
		text-align: center;
		border-radius: 50rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.footer-btn.contact-btn {
		background-color: #ff9500;
		color: #fff;
		margin-right: 20rpx;
	}

	.footer-btn.main-btn {
		background-color: #ff4d4f;
		color: #fff;
	}

	@media (max-width: 992px) {

		.basic-info,
		.financial {
			flex-basis: 100%;
		}

		.vehicle-info,
		.qualification,
		.intellectual,
		.risk {
			flex-basis: calc(50% - 8px);
		}
	}

	@media (max-width: 768px) {

		.vehicle-info,
		.qualification,
		.intellectual,
		.risk {
			flex-basis: 100%;
		}

		.info-col-item {
			width: 100%;
			margin-bottom: 4px;
		}

		.financial-item,
		.ip-item {
			margin-bottom: 8px;
		}
	}
</style>
